import React from 'react';
import styles from './Message.css';

class Message extends React.Component {
  constructor(props) {
    super(props);
  }
  isMe =() => {
    const children = this.props.children;
    if (children.username === children.speaker) {
      return true;
    }
    return false;
  }
  render() {
    return (
      <div className={this.isMe() ? styles.isMe : styles.other}>
        <p className={styles.dialogue}>
          <span className={styles.speaker}>{this.props.children.speaker}</span>
          <span className={styles.content}>{this.props.children.news}</span>
        </p>
        <p className={styles.time}>{this.props.children.date}</p>
      </div>
    );
  }

}

export default Message;
